<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>喵星汇-导航</title>
  <link rel="icon" href="./favicon.ico">
  <link rel="stylesheet" href="./public/css/index.css">
</head>

<body>
  <div id="app">

    <header class="header">
      <div class="header-nav" ref="HeaderNav">
        <div class="title">
          <div class="logo">
            <img src="./public/img/logo/logo_M_128x128.png" alt="">
          </div>
          <div class="name">
            <h2>喵星汇-导航</h2>
            <p>mxh.fmboy.com</p>
          </div>
        </div>
        <div class="nav">
          <a href="https://gitee.com/FMBOY" target="_blank">Gitee</a>
          <a href="https://github.com/FMBOY520" target="_blank">GitHub</a>
          <a href="https://blog.csdn.net/m0_74175846" target="_blank">CSDN</a>
          <a href="https://space.bilibili.com/3546629109975913" target="_blank">Bilibili</a>
        </div>
      </div>

      <!-- 回到顶部 -->
      <div class="back-to-top" ref="BackToTop">
        <img src="./public/icon/BackToTop.svg" alt="">
      </div>
    </header>

    <main class="main">
      <!-- ========== 日期模块 ========== -->
      <div class="date-module">
        <h2 class="text t1">{{ date_1 }}</h2>
        <h4 class="text t2">{{ date_2 }}</h4>
        <h6 class="text t3">{{ date_3 }}</h6>
      </div>
      <!-- ========== 日期模块 ========== -->

      <!-- ========== 搜索模块 ========== -->
      <div class="search-module">
        <form class="form" :action="search.url" target="_blank">
          <input class="ss1" type="text" :name="search.name" :placeholder="search.placeholder" v-model="search.value">
          <button class="ss2" type="submit" @click="searchBtn">搜索</button>
        </form>
        <div class="search_nav" @click="searchListBtn">
          <a href="javascript:;" v-for="item in search.list">{{item.title}}</a>
        </div>
      </div>
      <!-- ========== 搜索模块 ========== -->

      <!-- ========== 导航模块 ========== -->
      <div class="nav-module">
        <div v-for="item in nav_module">
          <h2 class="title">{{ item.category_name }}</h2>
          <div class="link">
            <div class="link-item" v-for="i in item.navigation">
              <a target="_blank" :title="i.name" :href="i.url">
                <img :src="i.logo">
                <p>{{ i.name }}</p>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- ========== 导航模块 ========== -->
    </main>

    <footer class="footer">
      <!-- 信息 -->
      <div class="footer-info">
        <div class="footer-info-content">
          <div class="title">
            <div class="logo">
              <img src="./public/img/logo/logo_M_128x128.png" alt="">
            </div>
            <div class="name">
              <h2>喵星汇</h2>
              <p>mxh.fmboy.com</p>
            </div>
          </div>
          <div class="content" v-html="config.content"></div>
        </div>

        <div class="footer-info-link">
          <a v-for="item in footer.link" target="_blank" :href="item.url">
            <img :src="item.img" alt="">
          </a>
        </div>

        <div class="footer-info-QR">
          <div class="QR" v-for="item in footer.QR">
            <div class="url"><img :src="item.url" alt=""></div>
            <p class="title">{{item.title}}</p>
          </div>
        </div>
      </div>
      <!-- 版权 -->
      <div class="footer-copyright">
        <span class="copyright" v-html="config.copyright"></span>
        <span class="version">网站版本：{{ config.version }}</span>
      </div>
    </footer>

  </div>
  <script type="module" src="./public/js/index.js"></script>
</body>

</html>